<template>
  <t-descriptions bordered :column="4" :items="items" :content-style="{'text-align':'center'}" :label-style="{'text-align':'center',width: '120px'}"/>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { Icon, MessagePlugin, Tooltip } from 'tdesign-vue-next';
import { computed, h, inject, Ref, ref } from 'vue';

import { channelManageCRUD } from '@/api/config/common-config';
import { propertyManageCRUD } from '@/api/config/property';
import { useDictionaryStore, useUserStore } from '@/store';
import city from '@/utils/city';
import maskPhone from '@/utils/maskPhone'

// 用户仓库
const userStore = useUserStore();
// 字典仓库
const dictionaryStore = useDictionaryStore();
// 楼盘信息列表
const propertyInfoList = ref([]);
// 处理获取楼盘信息列表
const handleGetPropertyInfoList = () => {
  const params = {
    pageSize: -1,
  };
  propertyManageCRUD
    .page(params)
    .then((data) => {
      propertyInfoList.value = data.list;
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
};
handleGetPropertyInfoList();
// 渠道列表
const channelList = ref([]);
// 处理获取渠道列表
const handleGetChannelList = () => {
  const params = {
    pageSize: -1,
  };
  channelManageCRUD
    .page(params)
    .then((data) => {
      channelList.value = data.list;
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
};
handleGetChannelList();
// 订单详情
const orderDetails = inject<Ref<Record<string, any>>>('orderDetails');
// 解析城市
const analysisCity = (row: Record<string, any>) => {
  let result = '';
  if (row.province) {
    result += city.list.find((item) => item.adcode === row.province).name;
  }
  if (row.city) {
    result += ` / ${city.list.find((item) => item.adcode === row.city).name}`;
  }
  if (row.area) {
    result += ` / ${city.list.find((item) => item.adcode === row.area).name}`;
  }
  return result;
};
// 手机号显示状态
const phoneVisible = ref(false);
  
// 切换手机号显示状态
const togglePhoneVisibility = () => {
  phoneVisible.value = !phoneVisible.value;
};
// 创建手机号视图
const createPhoneView = (phone: string) => {
  if (!phone) return h('span', '');
  
  return h('div', { 
    class: 'phone-container'
  }, [
    h('span', phoneVisible.value ? phone : maskPhone(phone)),
    h(Icon, {
      name: phoneVisible.value ? 'browse-off' : 'browse',
      class: 'view-icon',
      onClick: togglePhoneVisibility
    })
  ]);
};
// 项目列表
const items = computed(() => {
    return [
    {
      label: '客户名称',
      content: orderDetails.value.name?orderDetails.value.name:orderDetails.value.customerName
    },
    {
      label: '手机号码',
      content: createPhoneView(orderDetails.value.phone),
    },
    {
      label: '微信号码',
      content: orderDetails.value.wxCode,
    },
    {
      label: '楼盘名称',
      content: () => h('div', [
        h('span', propertyInfoList.value.find((item) => item.id === orderDetails.value.propertyName)?.name),
        h('span', { style: 'color: #999; margin-left: 4px;' }, orderDetails.value.address)
      ]),
    },
    
    {
      label: '订单类型',
      content: dictionaryStore.analysis('decoration_order_type', orderDetails.value.decorationType),
    },
    {
      label: '客户等级',
      content: dictionaryStore.analysis('decoration_order_customer_level', orderDetails.value.customerLevel),
    },
    
    {
      label: '归属城市',
      content: analysisCity(orderDetails.value),
    },
    {
      label: '来源渠道',
      content: channelList.value.find((item) => item.id.toString() === orderDetails.value.channelSource)?.name,
    },
    {
      label: '房屋户型',
      content: dictionaryStore.analysis('decoration_order_house_type', orderDetails.value.houseType),
    },
    {
      label: '房屋面积(㎡)',
      content: orderDetails.value.houseArea,
    },
    {
      label: '上报人',
      content: userStore.getUserNameById(orderDetails.value.creator),
    },
    {
      label: '客服',
      content: userStore.getUserNameById(orderDetails.value.saleId),
    },
    {
      label: '设计师',
      content: userStore.getUserNameById(orderDetails.value.designerId),
    },
    {
      label: '产品设计师',
      content: userStore.getUserNameById(orderDetails.value.productDesignerId),
    },
    {
      label: '工程部经理',
      content: userStore.getUserNameById(orderDetails.value.engineeringManagerId),
    },
    {
      label: '监理',
      content: userStore.getUserNameById(orderDetails.value.supervisionId),
    },
    {
      label: '施工状态',
      content: dictionaryStore.analysis('engineering_status', orderDetails.value.engineeringStatus),
    },
    {
      label: '合同总价(元)',
      content: orderDetails.value.contractPrice,
    },
    {
      label: '合同开工时间',
      content: orderDetails.value.contractBeginTime?dayjs(orderDetails.value.contractBeginTime).format('YYYY-MM-DD'):'',
    },
    {
      label: '合同竣工时间',
      content: orderDetails.value.contractEndTime?dayjs(orderDetails.value.contractEndTime).format('YYYY-MM-DD'):'',
    },

    {
      label: '创建时间',
      content: dayjs(orderDetails.value.createTime).format('YYYY-MM-DD HH:mm:ss'),
      span: 2
    },
    {
      label: '实际开工时间',
      content: orderDetails.value.actualBeginTime?dayjs(orderDetails.value.actualBeginTime).format('YYYY-MM-DD'):'',
    },
    {
      label: '实际竣工时间',
      content: orderDetails.value.actualEndTime?dayjs(orderDetails.value.actualEndTime).format('YYYY-MM-DD'):'',
    },

   
  ];
 
  
});
</script>
